<template>
  <view class="container">
    <!-- 内容区域 -->
    <view class="content">
      <!-- 常用服务 -->
      <view class="service-section">
        <view class="section-title">
          <text>常用服务</text>
        </view>
        <view class="service-grid">
          <view class="service-item">
            <view class="icon-circle">
              <uni-icons type="calendar" size="28" color="#fff"></uni-icons>
            </view>
            <text class="service-name">预约挂号</text>
          </view>
          <view class="service-item">
            <view class="icon-circle">
              <uni-icons type="shop" size="28" color="#fff"></uni-icons>
            </view>
            <text class="service-name">药品配送</text>
          </view>
          <view class="service-item">
            <view class="icon-circle">
              <uni-icons type="chat" size="28" color="#fff"></uni-icons>
            </view>
            <text class="service-name">健康咨询</text>
          </view>
          <view class="service-item">
            <view class="icon-circle">
              <uni-icons type="staff" size="28" color="#fff"></uni-icons>
            </view>
            <text class="service-name">护理服务</text>
          </view>
        </view>
      </view>

      <!-- 医疗服务 -->
      <view class="service-section">
        <view class="section-title">
          <text>医疗服务</text>
        </view>
        <view class="medical-service">
          <view class="medical-left">
            <view class="medical-item">
              <view class="image-placeholder">
                <image
                  src="https://images.unsplash.com/photo-1519494026892-80bbd2d6fd0d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=200&q=80"
                  mode="aspectFill"
                />
              </view>
              <view class="medical-title">附近医院</view>
              <view class="medical-desc">查找周边医疗机构</view>
              <view class="map-link">
                <uni-icons type="location" size="16" color="#007aff"></uni-icons>
                <text>查看地图</text>
              </view>
            </view>
            <view class="medical-item">
              <view class="image-placeholder">
                <image
                  src="https://images.unsplash.com/photo-1612349317150-e413f6a5b16d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=200&q=80"
                  mode="aspectFill"
                />
              </view>
              <view class="medical-title">家庭医生</view>
              <view class="medical-desc">专属健康管理服务</view>
              <view class="map-link">
                <uni-icons type="phone" size="16" color="#007aff"></uni-icons>
                <text>联系医生</text>
              </view>
            </view>
          </view>
        </view>
      </view>

      <!-- 生活服务 -->
      <view class="service-section">
        <view class="section-title">
          <text>生活服务</text>
        </view>
        <view class="life-service">
          <view class="life-item">
            <view class="life-icon">
              <uni-icons type="settings" size="24" color="#fff"></uni-icons>
            </view>
            <text class="service-name">家政服务</text>
          </view>
          <view class="life-item">
            <view class="life-icon">
              <uni-icons type="shop" size="24" color="#fff"></uni-icons>
            </view>
            <text class="service-name">助餐服务</text>
          </view>
          <view class="life-item">
            <view class="life-icon">
              <uni-icons type="cart" size="24" color="#fff"></uni-icons>
            </view>
            <text class="service-name">代购服务</text>
          </view>
        </view>
      </view>

      <!-- 紧急服务 -->
      <view class="service-section">
        <view class="section-title">
          <text>紧急服务</text>
        </view>
        <view class="emergency-service">
          <view class="emergency-btn">
            <uni-icons type="phone" size="32" color="#fff"></uni-icons>
            <view class="btn-text">一键呼叫</view>
            <view class="btn-desc">紧急联系人</view>
          </view>
          <view class="emergency-btn">
            <uni-icons type="help" size="32" color="#fff"></uni-icons>
            <view class="btn-text">紧急救援</view>
            <view class="btn-desc">医疗急救</view>
          </view>
        </view>
      </view>
    </view>

    <!-- 语音助手 - 移到最外层，确保在所有内容之上 -->
    <view
      class="voice-assistant"
      :style="{ left: voicePosition.x + 'px', top: voicePosition.y + 'px' }"
      @touchstart="onVoiceTouchStart"
      @touchmove="onVoiceTouchMove"
      @touchend="onVoiceTouchEnd"
    >
      <view class="mic-icon">
        <uni-icons type="mic" size="28" color="#fff"></uni-icons>
      </view>
      <view class="mic-text">语音助手</view>
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted } from 'vue';

// 语音助手位置状态
const voicePosition = ref({
  x: 0,
  y: 0,
});

// 拖拽相关状态
const isDragging = ref(false);
const startX = ref(0);
const startY = ref(0);
const startLeft = ref(0);
const startTop = ref(0);

// 初始化语音助手位置
onMounted(() => {
  // 初始位置设置为屏幕右侧中间
  uni.getSystemInfo({
    success: (res) => {
      voicePosition.value = {
        x: res.windowWidth - 100,
        y: res.windowHeight / 2 - 80,
      };
    },
  });
});

// 触摸开始事件
const onVoiceTouchStart = (e) => {
  isDragging.value = true;
  startX.value = e.touches[0].clientX;
  startY.value = e.touches[0].clientY;
  startLeft.value = voicePosition.value.x;
  startTop.value = voicePosition.value.y;

  // 阻止事件冒泡
  e.stopPropagation();
};

// 触摸移动事件
const onVoiceTouchMove = (e) => {
  if (!isDragging.value) return;

  const currentX = e.touches[0].clientX;
  const currentY = e.touches[0].clientY;

  // 计算移动距离
  const deltaX = currentX - startX.value;
  const deltaY = currentY - startY.value;

  // 更新位置
  voicePosition.value = {
    x: startLeft.value + deltaX,
    y: startTop.value + deltaY,
  };

  // 阻止事件冒泡
  e.stopPropagation();
};

// 触摸结束事件
const onVoiceTouchEnd = (e) => {
  isDragging.value = false;

  // 边界检查，确保语音助手不会移出屏幕
  uni.getSystemInfo({
    success: (res) => {
      const { windowWidth, windowHeight } = res;

      // 限制在屏幕范围内
      let newX = voicePosition.value.x;
      let newY = voicePosition.value.y;

      // 水平边界检查
      if (newX < 0) newX = 0;
      if (newX > windowWidth - 100) newX = windowWidth - 100;

      // 垂直边界检查
      if (newY < 0) newY = 0;
      if (newY > windowHeight - 160) newY = windowHeight - 160;

      voicePosition.value = { x: newX, y: newY };
    },
  });

  e.stopPropagation();
};
</script>

<style scoped>
.container {
  width: 100%;
  background-color: #fff;
  min-height: 100vh;
  box-shadow: 0 0 10rpx rgba(0, 0, 0, 0.05);
  position: relative;
  overflow-x: hidden;
}

.status-bar {
  height: 64rpx;
}

/* 内容区域 */
.content {
  padding: 40rpx; /* 增大内边距 */
  position: relative;
  z-index: 1;
}

/* 常用服务 */
.service-section {
  background: white;
  border-radius: 24rpx;
  padding: 40rpx; /* 增大内边距 */
  margin-bottom: 40rpx; /* 增大间距 */
  box-shadow: 0 2rpx 16rpx rgba(0, 0, 0, 0.05);
  position: relative;
  z-index: 1;
}

.section-title {
  font-size: 36rpx; /* 增大字体 */
  font-weight: 600;
  margin-bottom: 40rpx; /* 增大间距 */
  color: #333;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.service-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 40rpx; /* 增大间距 */
}

.service-item {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.icon-circle {
  width: 120rpx; /* 增大尺寸 */
  height: 120rpx;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20rpx; /* 增大间距 */
}

.service-item:nth-child(1) .icon-circle {
  background-color: #4cd964;
}
.service-item:nth-child(2) .icon-circle {
  background-color: #ff9500;
}
.service-item:nth-child(3) .icon-circle {
  background-color: #007aff;
}
.service-item:nth-child(4) .icon-circle {
  background-color: #ff3b30;
}

.service-name {
  font-size: 28rpx; /* 增大字体 */
  color: #666;
  text-align: center;
}

/* 医疗服务 */
.medical-service {
  display: flex;
  gap: 40rpx; /* 增大间距 */
  position: relative;
}

.medical-left {
  flex: 1;
}

.medical-item {
  background: #f8f9fa;
  border-radius: 24rpx; /* 增大圆角 */
  padding: 32rpx; /* 增大内边距 */
  margin-bottom: 30rpx; /* 增大间距 */
}

.medical-item:last-child {
  margin-bottom: 0;
}

.medical-title {
  font-size: 32rpx; /* 增大字体 */
  font-weight: 600;
  margin-bottom: 16rpx; /* 增大间距 */
}

.medical-desc {
  font-size: 28rpx; /* 增大字体 */
  color: #888;
  margin-bottom: 20rpx; /* 增大间距 */
}

.map-link {
  color: #007aff;
  font-size: 28rpx; /* 增大字体 */
  display: flex;
  align-items: center;
}

.map-link text {
  margin-left: 12rpx; /* 增大间距 */
}

/* 可拖动的语音助手 */
.voice-assistant {
  position: fixed;
  width: 200rpx; /* 增大尺寸 */
  height: 240rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  touch-action: none;
  pointer-events: auto;
}

.voice-assistant .mic-icon {
  width: 140rpx; /* 增大尺寸 */
  height: 140rpx;
  border-radius: 50%;
  background: #007aff;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 24rpx; /* 增大间距 */
  box-shadow: 0 8rpx 24rpx rgba(0, 122, 255, 0.3);
  transition: all 0.2s;
}

.voice-assistant:active .mic-icon {
  transform: scale(0.95);
  box-shadow: 0 4rpx 12rpx rgba(0, 122, 255, 0.4);
}

.mic-text {
  font-size: 28rpx; /* 增大字体 */
  color: #666;
  text-align: center;
  background: rgba(255, 255, 255, 0.95);
  padding: 12rpx 20rpx; /* 增大内边距 */
  border-radius: 24rpx;
  backdrop-filter: blur(20rpx);
  -webkit-backdrop-filter: blur(20rpx);
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
}

/* 图片占位 */
.image-placeholder {
  width: 100%;
  height: 200rpx; /* 增大高度 */
  background-color: #e9ecef;
  border-radius: 20rpx; /* 增大圆角 */
  margin-bottom: 24rpx; /* 增大间距 */
  display: flex;
  align-items: center;
  justify-content: center;
  color: #999;
  font-size: 24rpx;
  overflow: hidden;
}

.image-placeholder image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 生活服务 */
.life-service {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40rpx; /* 增大间距 */
}

.life-item {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.life-icon {
  width: 100rpx; /* 增大尺寸 */
  height: 100rpx;
  border-radius: 20rpx; /* 增大圆角 */
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20rpx; /* 增大间距 */
}

.life-item:nth-child(1) .life-icon {
  background-color: #5ac8fa;
}
.life-item:nth-child(2) .life-icon {
  background-color: #ff9500;
}
.life-item:nth-child(3) .life-icon {
  background-color: #4cd964;
}

/* 紧急服务 */
.emergency-service {
  display: flex;
  gap: 40rpx; /* 增大间距 */
}

.emergency-btn {
  flex: 1;
  height: 200rpx; /* 增大高度 */
  border-radius: 28rpx; /* 增大圆角 */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: 600;
}

.emergency-btn:first-child {
  background: linear-gradient(135deg, #ff4757, #ff3742);
}

.emergency-btn:last-child {
  background: linear-gradient(135deg, #ffa502, #ff7f00);
}

.emergency-btn .uni-icons {
  margin-bottom: 20rpx; /* 增大间距 */
}

.btn-text {
  font-size: 36rpx; /* 增大字体 */
}

.btn-desc {
  font-size: 28rpx; /* 增大字体 */
  opacity: 0.9;
}
</style>
